<template>
    <div>
        <div class="Loginmode">
            <div class="Loginmode-con">
                <slot></slot>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :stretch="true">
                    <el-tab-pane name="first">
                        <template v-slot:label>
                            <svg-icon :name="LoginmodeIcon === 1 ? '微信' : '微信 (1)'" width="20" height="20"></svg-icon>
                            <span style="font-size: 12px;">微信扫码登录</span>
                        </template>
                        <QRcode :CodeValue="QrcodeValue" @chiRefreshqrcode="Refreshqrcode" />
                    </el-tab-pane>
                    <el-tab-pane>
                        <template v-slot:label>
                            <svg-icon :name="LoginmodeIcon === 2 ? '1首页图标-04' : '1首页图标-04 (1)'" width="18"
                                height="18"></svg-icon>
                            <span style="font-size: 12px;">非常秀账号密码登录</span>
                        </template>
                        <div class="Loginmode-con-From">
                            <FormRef @resetForm="resetForm" @LoginsubmitForm="submitForm" :FormData='FormData'
                                :ruleForm="ruleForm" :LogType="'登录'" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="Switchlogin">
            <div class="Switchlogin-con">
                <div class="Switchlogin-con-title">其他登录方式</div>
                <div class="Switchlogin-con-con">
                    <div class="Switchlogin-con-con-item" v-for="( item, index ) in  LoginModu " :key="index"
                        @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)"
                        :style="{ cursor: IsChecked ? 'pointer' : 'not-allowed' }">
                        <div class="icon-bg">
                            <svg-icon :name="item.name" class="Svg-icon" width="25" height="25"></svg-icon>
                        </div>
                        <div>{{ item.type }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
// 路由
// import { useRouter } from 'vue-router';
// @ts-ignore
import data from '../../data/data.json';
// 二维码组件
import QRcode from '@/components/QRcode/QRcode.vue';
// 表单组件
import FormRef from '@/components/Form/FormRef.vue';
import { type FormInstance } from 'element-plus';
import { notification } from '@/utils/Notificathion';
// 防抖函数
import { throttling } from '@/utils/Throttling';
import { get_Login } from '@/utils/api';
import { useInfo } from '@/stores/counter';
const store = useInfo();

const Props = defineProps(['IsChecked']);
const Emit = defineEmits(['OffClick']);
// const router = useRouter();
const { IsChecked } = toRefs(Props);
// 登录方式渲染数据
const LoginModu = reactive(data);
// 鼠标滑过事件
const mouseenter = (index: number) => {
    if (!IsChecked?.value) return;
    LoginModu[index].name = LoginModu[index].name2;
};
// 鼠标离开事件
const mouseleave = (index: number) => {
    if (!IsChecked?.value) return;
    LoginModu[index].name = LoginModu[index].name1;
};

// 登录方式切换tab区域
const activeName = ref('first');
// 初始高亮的区分
const LoginmodeIcon = ref(1);

// 点击事件
const handleClick = (tab: any, event: any) => {
    switch (tab.index) {
        case '0':
            LoginmodeIcon.value = 1;
            break;
        case '1':
            LoginmodeIcon.value = 2;
            break;
        default:
            break;
    }
};

const FormData = reactive([
    {
        label: '账号',
        prop: 'users',
        type: 'text',
        autocomplete: 'off',

    },
    {
        label: '密码',
        prop: 'password',
        type: 'password',
        autocomplete: 'off',
    }
]);
const ruleForm: any = reactive({
    users: '',
    password: '',
});

// 表单确定按钮事件
const submitForm = throttling((value: object | any) => {
    if (value) {
        get_Login({
            "username": value.users,
            "password": value.password
        }).then((event) => {
            if (event.status === 201) {
                notification('登录成功',false,'success');
               
                localStorage.setItem('token', event.data.token);
                localStorage.setItem('time', Date.now() + '');
                localStorage.setItem('userinfo', JSON.stringify(event.data.user) || '');
                localStorage.removeItem('text');
                setTimeout(() => {
                    Emit('OffClick');
                    store.getuser();
                }, 1000);

            } else {
                notification('登录失败',"请检查账号密码是否正确",'error');
            }
        });
    }
}, 1000);

// 表单取消按钮事件
const resetForm = throttling((formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
}, 1000);


const QrcodeValue = ref('https://ts1.cn.mm.bing.net/th/id/R-C.0ac8db0557811b59e023cc5686a72bcb?rik=pSeUfzpFAuAIaQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305223024.jpg&ehk=r78GawrcHRT2NUrUGn%2ffa0j%2fkTj8SQ9p%2fTuP%2fr8nT%2fM%3d&risl=&pid=ImgRaw&r=0');
const ISqrcode = ref(false);
const Refreshqrcode = throttling(() => {
    ISqrcode.value = !ISqrcode.value;
    if (ISqrcode.value) {
        QrcodeValue.value = 'https://img.zcool.cn/community/01ab8e56c54f0032f875520f0e0002.jpg@1280w_1l_2o_100sh.jpg';
    } else {
        QrcodeValue.value = 'https://ts1.cn.mm.bing.net/th/id/R-C.039014756803be0c2b7602485af72222?rik=0Zb9UcUvmM1rCQ&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2009-05%2f17%2f17%2f200905171736002864-2090991.jpg&ehk=zn31Nvr492Ba5hmXQQoDeUmgsz9tqGzVQDOdDdBj14k%3d&risl=&pid=ImgRaw&r=0';
    }
}, 1000);
</script>

<style scoped lang="scss">
.Loginmode {
    width: 100%;
    height: 50%;
    display: flex;

    .Loginmode-con {
        margin: auto;
        width: 80%;
        height: 100%;
        position: relative;

        .el-tabs__nav {
            display: flex;
            align-items: center;
            justify-content: center;

            .el-tabs__item {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }
        }

        .Loginmode-con-From {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    }
}

.Switchlogin {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 13px;

    .Switchlogin-con {
        width: 75%;
        height: 100%;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: column;

        .Switchlogin-con-title {
            width: 100px;
            height: 20px;
            text-align: center;
            position: absolute;
            top: -10px;
            left: 170px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            z-index: 66;
        }

        .Switchlogin-con-con {
            margin-top: 10px;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .icon-bg {
                width: 50px;
                height: 50px;
                background: #F5F7FA;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                .Svg-icon {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            >div {
                width: 30%;
                height: 70%;
                font-size: 12px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: space-around;
                color: #8A8A8A;
            }
        }
    }
}
</style>